<template>
  <div>
    <van-popup :show="popshow" round get-container="body" close-on-click-overlay="false" custom-style="width:85%;border-radius:4px;" :overlay="true" @close="onClose">
      <div class="educatForm">
        <van-form>
          <van-cell-group>
            <div class="title">
              请填写您的工作经历
            </div>
            <div class="timeStyle">
              <van-field v-model="educatForm.startTime" label="开始时间" placeholder-style="color:#999;" required readonly is-link input-align="right" placeholder="请选择" clickable @click-input="clickStart" />
              <van-popup :show="showTime" position="bottom">
                <van-datetime-picker type="date" :value="currentDate" :min-date="minDate" :basic-formatter="basicFormatter" @confirm="onStartTime" @cancel="onCancelStart" />
              </van-popup>
            </div>
            <div class="timeStyle">
              <van-field v-model="educatForm.endTime" label="结束时间" placeholder-style="color:#999;" required readonly is-link input-align="right" placeholder="请选择" clickable @click-input="clickEnd" />
              <van-popup :show="showEndTime" position="bottom">
                <van-datetime-picker type="date" :value="currentDates" :min-date="minDate" :basic-formatter="basicFormatter" @confirm="onEndTime" @cancel="onCancelEnd" />
              </van-popup>
            </div>
            <van-field v-model="educatForm.educationName" class="educatClass" label="学校/机构名称" placeholder-style="color:#999;" autosize required placeholder="请输入学校/机构名称" type="textarea" @change="educatForm.educationName = $event.detail" />
            <van-field v-model="educatForm.speciality" class="educatClass" label="专业" placeholder-style="color:#999;" autosize required placeholder="请输入专业" type="textarea" @change="educatForm.speciality = $event.detail" />
            <van-field v-model="educatForm.certifier" class="educatClass" label="证明人" placeholder-style="color:#999;" required placeholder="请输入证明人" type="input" @change="educatForm.certifier = $event.detail" />
            <van-field v-model="educatForm.mobile" class="educatClass" label="证明人电话" placeholder-style="color:#999;" required placeholder="请输入证明人电话" type="tel" @blur="onBlur" @change="educatForm.mobile = $event.detail" />
          </van-cell-group>
        </van-form>
        <div class="workBtn">
          <div class="cancel" @click="onClose">
            取消
          </div>
          <div class="submit" @click="getform">
            确定
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { checkMobile } from '../../../../utils/rule'
import Toast from '@/wxcomponents/vant/toast/toast'
export default {
  components: { },
  props: {

  },
  data() {
    return {
      popshow: false,
      showTime: false,
      showEndTime: false,
      educatForm: {
        startTime: '',
        endTime: '',
        educationName: '',
        speciality: '',
        certifier: '',
        mobile: '',
      },
      relationList: ['母子', '父子', '姐弟'],
      currentDate: new Date().getTime(),
      currentDates: new Date().getTime(),
      minDate: new Date(1970, 1, 1).getTime(),
    }
  },
  methods: {
    // 电话号码失去焦点
    onBlur(val) {
      const number = checkMobile(val.detail.value)
      if (!number) {
        this.educatForm.mobile = ''
      }
    },
    clickStart() {
      this.showTime = true
    },
    // 处理控件显示的时间格式
    basicFormatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    onStartTime(val) {
      const date = new Date(val.detail)
      const Year = date.getFullYear()
      const Moth = (date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1)
      const Day = (date.getDate() < 10 ? `0${date.getDate()}` : date.getDate())
      const GMT = `${Year}-${Moth}-${Day}`
      this.educatForm.startTime = GMT
      this.showTime = false
    },
    onCancelStart() {
      this.showTime = false
    },
    clickEnd() {
      this.showEndTime = true
    },
    onEndTime(val) {
      const date = new Date(val.detail)
      const Year = date.getFullYear()
      const Moth = (date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1)
      const Day = (date.getDate() < 10 ? `0${date.getDate()}` : date.getDate())
      const GMT = `${Year}-${Moth}-${Day}`
      this.educatForm.endTime = GMT
      this.showEndTime = false
    },
    onCancelEnd() {
      this.showEndTime = false
    },
    open() {
      this.popshow = true
      this.educatForm = {
        startTime: '',
        endTime: '',
        educationName: '',
        speciality: '',
        certifier: '',
        mobile: '',
      }
    },
    // 编辑
    edit(item) {
      item.isEdit = true
      this.educatForm = item
      this.popshow = true
    },
    // 关闭弹窗
    onClose() {
      this.popshow = false
    },
    // 提交
    getform() {
      if (this.educatForm.startTime.trim().length === 0) {
        Toast('请选择开始时间')
        return
      }
      if (this.educatForm.endTime.trim().length === 0) {
        Toast('请选择结束时间')
        return
      }
      if (this.educatForm.educationName.trim().length === 0) {
        Toast('请填写学校/机构名称')
        return
      }
      if (this.educatForm.speciality.trim().length === 0) {
        Toast('请填写专业')
        return
      }
      if (this.educatForm.certifier.trim().length === 0) {
        Toast('请填写证明人')
        return
      }
      if (this.educatForm.mobile.trim().length === 0) {
        Toast('请填写证明人电话')
        return
      }
      this.onClose()
      this.$emit('educatValue', this.educatForm)
    },
  },
}
</script>
<style lang="scss" scoped>
.educatForm{
  color:#333;
  font-size: 18px;
  font-weight: 600;
  padding-top:20px;
  text-align: center;
  .title{
    padding-bottom: 20px;
  }
  .workBtn{
    display: flex;
    color:#739ECA;
    height:64px;
    .cancel{
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border:1px solid #F2F2F2;
    }
    .submit{
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
  }
}
</style>
<style lang="scss">
.educatClass{
  view {
    label{
      width:100%;
      display: flex;
      white-space: nowrap;
    }
    input{
      padding-right: 16px;
      text-align: right;
      color:#999;
    }
    textarea{
      padding-right: 16px;
      text-align: right;
      color:#999;
    }
  }
}
.timeStyle{
  view label{
    width:100%;
    display: flex;
  }
  view input{
    color:#999;
  }
}
</style>
